<template>
    <div class="todo-list">
        <!-- 使用 v-for 循环渲染待办事项列表，若列表为空显示提示信息 -->
        <template v-if="list.length > 0">
            <div class="todo-item" v-for="item in list" :key="item.id">
                <van-cell :title="item.name" :class="{ 'item-label-completed': item.done }">
                    <!-- 左侧图标模板，用于切换任务完成状态 -->
                    <template #icon>
                        <van-icon 
                            :name="item.done? 'passed' : 'clock-o'" 
                            @click="toggleTaskStatus(item)" 
                            :title="item.done? '标记为未完成' : '标记为已完成'"
                        />
                    </template>
                    <!-- 右侧图标模板，用于删除任务 -->
                    <template #right-icon>
                        <van-icon 
                            name="clear" 
                            @click="deleteTask(item.id)" 
                            :title="删除任务"
                        />
                    </template>
                </van-cell>
            </div>
        </template>
        <p v-else class="empty-message">暂无待办事项</p>
    </div>
</template>

<script>
export default {
    props: {
        // 接收父组件传递的待办事项列表
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {};
    },
    methods: {
        // 切换任务完成状态的方法，添加输入验证
        toggleTaskStatus(item) {
            if (item && typeof item.done === 'boolean') {
                item.done = !item.done;
            }
        },
        // 删除任务的方法，通过 $emit 触发父组件的事件
        deleteTask(id) {
            if (typeof id === 'number' || typeof id === 'string') {
                this.$emit('delTodo', id);
            }
        }
    }
};
</script>

<style scoped>
.todo-list {
    font-size: 16px;
}

.todo-item {
    border-bottom: 1px solid #ededed;
    display: flex;
    align-items: center;
    height: 40px;
    transition: background-color 0.2s ease;
}

.todo-item:hover {
    background-color: #f9f9f9;
}

.item-label-completed {
    color: #949494;
    text-decoration: line-through;
}

/* 鼠标悬停在待办事项上时，右侧删除图标显示 */
.todo-item:hover .van-icon[name="clear"] {
    opacity: 1;
}

.van-icon[name="clear"] {
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.empty-message {
    text-align: center;
    color: #999;
    padding: 20px;
}
</style>    